// 定义一个Vue插件:插件的本质就是一个对象，必须保证对象中有一个属性install
// 他的值是函数
// 定义好了后要在入口文件导入自定义插件
// 导入后需要配置插件，需要用Vue.use(MyPlugins)
// 插件可以扩展Vue的相关特性:指令、过滤器、组件。。。。
// import MyTest from '@/views/test/Mytest.vue'
// 当图片数据加载失败的时候显示默认的图片，导入默认图片
import PageTools from '@/components/PageTools/index.vue'
import defaultAvatar from '@/assets/common/head.jpg'
import dayjs from 'dayjs'
import UploadExcel from '@/components/UploadExcel'
import ImageUpload from '@/components/ImageUpload'
import { Message } from 'element-ui'
import store from '@/store'

// 此时也可以在全局导入,让用户能够自己传入自己想传的图片
// 插件的本质是对象
export default {
  install(Vue, options) {
    // 参数一：形参Vue是Vue的构造函数
    // 参数二: 形参options表示Vue.use调用是传递的参数二
    // Vue.use(MyPlugins, { info,'hello'})
    // 给Vue的原型上新增了一个http的属性，并且赋值为123
    // Vue.prototype.$http = 123
    // 扩展了一个全局组件，名字为my-com，这个名字可以自己定义
    // Vue.component('my-com', MyTest)
    // 扩展自定义指令：处理图片加载失败的情况
    // 这里面的第一个参数是,自定义指令的命名，以后使用的时候就是v-指令的名字
    // 这个是局部指令
    Vue.directive('imgerror', {
      // inserted指令首次初始化时触发一次,并且只触发一次
      inserted(el, bindings) {
        // el表示绑定指令的DOM元素
        // bindings表示指令相关的参数信息
        // <img v-imgerror="avatar" class="user-avatar" />
        if (bindings.value) {
          el.src = bindings.value
        }
      },
      // componentUpdated指令依赖的数据发生更新就触发
      componentUpdated(el, bindings) {
        el.src = bindings.value
        // 如果后端提供的数据是错误的，此时应该显示一张默认图片
        // 如果img加载图片失败了，自动触发该事件
        // 这个onerror是原生dom的行为，所以需要用el来调用
        el.onerror = () => {
          // 此时options接收的就是用户传进来的实参，为什么要用点，因为用户传进来的是对象
          el.src = options.defaultAvatar || defaultAvatar
        }
      }
    })
    // 扩展全局组件
    Vue.component(PageTools.name, PageTools)
    // 注册导入excel组件
    Vue.component(UploadExcel.name, UploadExcel)
    Vue.component(ImageUpload.name, ImageUpload) // 注册导入上传组件
    // 扩展过滤器
    // Vue.filter('formatTime', (value) => {
    //   return moment(value).format('yyyy-MM-DD')
    // })
    // 这是事件的过滤器,第一个参数是修改后的值,第二个value是过滤器的左边
    Vue.filter('formatTime', (value) => {
      return dayjs(value).format('YYYY-MM-DD')
    })
    // 在vue的原型上添加一个属性$isOk
    Vue.prototype.$isOk = (pointName) => {
      const flag = store.getters.points.includes(pointName)
      if (!flag) {
        // 没有权限，提示没有权限
        Message({
          type: 'waring',
          Message: '没有改功能权限'

        })
        return false
      }
      return true
    }
  }
}
